#include("/front/family/_layout.html")
#@layout()
#define layoutImportcss()
    <link rel="stylesheet" href="/front/css/framework7-icons.css">
    <link rel="stylesheet" href="/front/css/grid.css">
    <link rel="stylesheet" href="/front/css/actions.css">
#end
#define layoutHead()
<title>成员 - 班级首页</title>
#end
#define layoutHome()
	<div class="navbar">
		<div class="navbar-inner toolbstyle">
			<div class="left">
				<a href="javascript:window.location.href='/front/family/classes'" class="link back">
					<i class="icon icon-back"></i>
				</a>
			</div>
			<div class="title">班级成员</div>
			<div class="right"></div>
		</div>
	</div>

	<!-- <div class="page-content people-page-content infinite-scroll-content">-->
		<div class="people-list" style="margin:0px">
			<div class="list" style="margin:45px 0 0 0">
				<ul id="ul_teachers">
				</ul>
			</div>
			<div class="list">
				<ul id="ul_students">
				</ul>
			</div>
		</div>                   
	<!--</div>-->
#end
#define layoutImportjs()
<!-- <script type="text/javascript" src="/front/js/infinite-scroll.js"></script>
    <script type="text/javascript" src="/front/js/preloader.js"></script>
    <script type="text/javascript" src="/front/js/popup.js"></script> -->
#end
#define layoutScript()
<script type="text/javascript">
	
	sendPost('/front/family/students/getMembers', null, function(res){
		if (res.code == 200){
			if (isJsonProps(res, 'list_teachers')){
				bindTeachers(res.list_teachers);
			}
			if (isJsonProps(res, 'list_students')){
				bindStudents(res.list_students);
			}
		}else{
			alert(res.msg);
		}
	});
	
	function bindTeachers(list_data){
		var shtml = '<li class="list-group-title">老师（<span>'+list_data.length+'</span>人）</li>';
		for (var i = 0; i < list_data.length; i++) {
			var jdata = list_data[i];
			shtml += getTeachersHtml(jdata);
		}
		$$('#ul_teachers').append(shtml);
	}
	function bindStudents(list_data){
		var shtml = '<li class="list-group-title">学生（<span>'+list_data.length+'</span>人）</li>';
		for (var i = 0; i < list_data.length; i++) {
			var jdata = list_data[i];
			shtml += getStudenstHtml(jdata);
		}
		$$('#ul_students').append(shtml);
	}
	function getTeachersHtml(jdata){
		var lihtml = `
			<li>
				<a class="item-content ac-1">
					<div class="item-media">
						<span class="head-portrait people-head"><img src="${formatUserHeadImage(jdata.user_img)}"></span>
					</div>
					<div class="item-inner">
						<div class="item-title">
							<div class="name">${jdata.teacher_name}（${jdata.post_name}）</div>
							<div class="phone">${jdata.teacher_mobile}</div>
						</div>
						<div class="item-after">
							<i class="f7-icons" onclick="callTelphone('${jdata.teacher_mobile}')">phone_fill</i>
						</div>
					</div>
				</a>
			</li>
		`;
		return lihtml;
	}
	function getStudenstHtml(jdata){
		var lihtml = `
			<li>
				<a class="item-content ac-1">
					<div class="item-media">
						<span class="head-portrait people-head"><img src="${formatUserHeadImage(jdata.student_headpic)}"></span>
					</div>
					<div class="item-inner">
						<div class="item-title">${jdata.student_name}</div>
						<div class="item-after item-after-student">
							<i class="f7-icons" onclick="callTelphone('${jdata.student_mobile}')">phone_fill</i>
							<i class="f7-icons" onclick="window.location.href='/front/family/album?stuid=${jdata.student_id}'">images_fill</i>
							<i class="icon icon-next" style="display:none;"></i>
						</div>
					</div>
				</a>
			</li>
		`;
		return lihtml;
	}
</script>
#end
